<!--  -->
<template>
    <div class=''>
        <div class="item">
            <el-form ref="form" :model="form" label-width="120px">
                <el-form-item label="姓名" prop="name">
                    <el-input class="custom-input" type="text" v-model="form.username" placeholder=""
                        :readonly="readonly"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input class="custom-input" type="text" v-model="form.phone" placeholder="请输入发货方电话"
                        :readonly="readonly"></el-input>
                </el-form-item>
                <el-form-item label="公司名称" prop="phone">
                    <el-input class="custom-input" type="text" v-model="form.company_name" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="社会信用代码" prop="phone">
                    <el-input class="custom-input" type="text" v-model="form.shxydm" placeholder=""></el-input>
                </el-form-item>
                <!-- <el-form-item label="云账户户名" prop="phone">
                    <el-input class="custom-input" type="text" v-model="form.cloudName" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="云账户户号" prop="phone">
                    <el-input class="custom-input" type="text" v-model="form.cloudAcc" placeholder=""></el-input>
                </el-form-item> -->
                <el-form-item label="企业证件类型" prop="phone">
                    <!-- <el-input class="custom-input" type="text" v-model="form.zj_type" placeholder=""></el-input> -->
                    <el-radio v-model="form.zj_type" :label="0" :disabled="readonly">未多证合一</el-radio>
                    <el-radio v-model="form.zj_type" :label="1" :disabled="readonly">已多证合一</el-radio>
                </el-form-item>
                <el-form-item label="身份证号" prop="phone">
                    <el-input class="custom-input" type="text" v-model="form.sfzh" placeholder=""
                        :readonly="readonly"></el-input>
                </el-form-item>

                <!-- <el-form-item label="邮箱" prop="phone">
                    <el-input class="custom-input" type="text" v-model="form.sign_email" placeholder=""></el-input>
                </el-form-item> -->
                <el-form-item label="企业组织类型" prop="phone">
                    <!-- <el-input class="custom-input" type="text" v-model="form.zz_type" placeholder=""></el-input> -->
                    <el-radio v-model="form.zz_type" :label="0" :disabled="readonly">企业</el-radio>
                    <el-radio v-model="form.zz_type" :label="1" :disabled="readonly">个体工商户</el-radio>
                </el-form-item>

                <el-form-item label="开户行" prop="phone">
                    <el-input class="custom-input" type="text" v-model="form.bank_name" placeholder=""
                        :readonly="readonly"></el-input>
                </el-form-item>

                <el-form-item label="测试货主" prop="phone">
                    <!-- <el-input class="custom-input" type="text" v-model="form.zz_type" placeholder=""></el-input> -->
                    <el-radio v-model="form.is_test" :label="0">否</el-radio>
                    <el-radio v-model="form.is_test" :label="1">是</el-radio>
                </el-form-item>
                <el-form-item label="银行账号" prop="phone">
                    <el-input class="custom-input" type="text" v-model="form.bank" placeholder=""
                        :readonly="readonly"></el-input>
                </el-form-item>

                <!-- <el-form-item label="是否无限额度" prop="phone">
                    <el-radio v-model="form.wuxian" :label="0">否</el-radio> 1
                    <el-radio v-model="form.wuxian" :label="1">是</el-radio>
                </el-form-item>
                <el-form-item label="是否无限额度" prop="phone">
                    <el-radio v-model="form.yuejie" :label="0">否</el-radio> 传1
                    <el-radio v-model="form.yuejie" :label="1">是</el-radio>
                </el-form-item> -->

                <!-- <el-form-item label="已用额度" prop="phone">
                    <el-input class="custom-input" type="text" v-model="form.sy_edu" placeholder=""></el-input>
                </el-form-item>
                <el-form-item label="月结额度" prop="phone">
                    <el-input class="custom-input" type="text" v-model="form.sy_money" placeholder=""></el-input>
                </el-form-item> -->

                <el-form-item label="货主地区" prop="phone">
                    <!-- <el-radio v-model="form.area" :label="0">总公司</el-radio>
                    <el-radio v-model="form.area" :label="1">林州分公司</el-radio>
                    <el-radio v-model="form.area" :label="2">安徽分公司</el-radio>
                    <el-radio v-model="form.area" :label="3">郑州分公司</el-radio>
                    <el-radio v-model="form.area" :label="4">杭州分公司</el-radio>
                    <el-radio v-model="form.area" :label="5">安阳开发区</el-radio> -->
                    <el-radio v-for="(item, index) in getOfficesList" v-model="form.area" :key="item" :label="index">{{ item }}</el-radio >
                </el-form-item>
                <div class="imgs-box">
                    <div class="box">
                        <div>身份证正面：</div>
                        <el-image style="width: 280px; height: 280px" :src="form.id_pic" :fit="'cover'"
                            :preview-src-list="[form.id_pic]"></el-image>
                    </div>
                    <div class="box">
                        <div>身份证反面：</div>
                        <el-image style="width: 280px; height: 280px" :src="form.id_pic2" :fit="'cover'"
                            :preview-src-list="[form.id_pic2]"></el-image>
                    </div>
                    <div class="box">
                        <div>营业执照：</div>
                        <el-image style="width: 280px; height: 280px" :src="form.license_pic" :fit="'cover'"
                            :preview-src-list="[form.license_pic]"></el-image>
                    </div>
                </div>
            </el-form>


        </div>

        <div class="dialog-footer" v-if="!readonly">
            <el-button type="danger" @click="$emit('reject', form.id)" v-if="!is_SHA">不通过</el-button>
            <el-button type="primary" @click="$emit('save', form)" v-if="!is_SHA">通 过</el-button>
        </div>
        <div class="dialog-footer" v-else>
            <el-button type="primary" @click="$emit('showSave', form)" v-if="!is_SHA">保存</el-button>
            <!-- 查看状态下的保存 -->
        </div>
    </div>
</template>

<script>
import { getOfficesList } from '@/utils/auth'
export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    props: {
        form: Object,
        readonly: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        //这里存放数据
        return {
            is_SHA:false,
            getOfficesList: getOfficesList(),
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {

    },
    //方法集合
    methods: {

    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {

    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        //特殊处理沙钢集团 当为沙钢集团时 无论是查看还是审核 都不显示保存按钮
        this.is_SHA = this.form.id == 266;
        
    },
    beforeCreate() { }, //生命周期 - 创建之前
    beforeMount() { }, //生命周期 - 挂载之前
    beforeUpdate() { }, //生命周期 - 更新之前
    updated() { }, //生命周期 - 更新之后
    beforeDestroy() { }, //生命周期 - 销毁之前
    destroyed() { }, //生命周期 - 销毁完成
    activated() { }, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.item {
    width: 100%;

    .el-form {
        display: flex;
        flex-wrap: wrap;

        .el-form-item {
            width: 50%;
        }

        .tool {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

            .sureBtn {
                width: 250px;
            }
        }

        .imgs-box {
            width: 100%;
            height: 300px;
            font-weight: 700;
            display: flex;
            justify-content: space-between;
            margin-top: 20px;

            &>.box {
                width: 30%;
                display: flex;


            }
        }
    }
}

::v-deep .el-form-item__content {
    display: flex;
    height: 100%;

    .custom-input {
        width: 100%;
    }

    .el-select {
        width: 100%;
    }

    .el-input {
        width: 100%;
    }

    .el-button {
        margin-left: 20px;
        background-color: $theme-primary;
        color: #fff;
        border: none;
        // border-radius: 20px;
    }

    .el-radio {
        display: flex;
        align-items: center;
        height: 100%;
        margin-right: 20px;
    }
}

.dialog-footer {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
</style>